<route>
{
meta: {
title: "个人中心",
cache: "personal-edit.password"
}
}
</route>


<script setup name="PersonalSetting">
import api from '@/api'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
//人像录入
const diaload = ref(false)
const router = useRouter()
const { proxy } = getCurrentInstance()

const personalForm = ref({
  head_picture: '',
  phone_number: '',
  qq_number: '',
  wechat_number: '',
  email: '',
})

const toSave = () => {
  api.post('user/updatePersonalDetails', personalForm.value).then((res) => {
    selectPersonalDetails()
  })
}

//先根据用户名查到需要的信息，填到表单上
const selectPersonalDetails = () => {
  api
    .get(
      '/user/selectPersonalDetails?account=' + localStorage.getItem('account')
    )
    .then((res) => {
      console.log(res)
      personalForm.value = res.data
    })
}
selectPersonalDetails()

//用户头像上传
const myHeaders = ref({
  Authorization: localStorage.getItem('token'),
})
const account = ref({
  name: localStorage.getItem('account'),
})

function handleSuccess(res) {
  // if (res.mag == '上传成功') {
  //     personalForm.value.head_picture = res.data
  //     proxy.$message.success(res.msg)
  // } else {
  //     proxy.$message.warning(res.error)
  // }
  proxy.$message.success(res.msg)
  selectPersonalDetails()
  //更新头像
  localStorage.removeItem('head_picture')
  localStorage.setItem('head_picture', res.data)
}

function editPassword() {
  router.push({
    name: 'personalEditPassword',
  })
}
import bbbb from '@/components/TakeWerk/index.vue'
//清除拍照功能
const clearCamera = ref()
//控制拍照功能的显示和隐藏
const takePhoto = () => {
  //   console.log('visible--->' + clearCamera.value.visible)
  //   visible.value = true
  //console.log('visible--->' + clearCamera.value.visible)
  diaload.value = true

}

const clearIntervals = () => {
  nextTick(() => {
    clearCamera.value.stopNavigator()
  })
  diaload.value = false
  //visible.value = false
}
</script>

<template>
  <div>
    <page-main>
      <el-tabs tab-position="left"
               style="height: 600px;">
        <el-tab-pane label="基本设置"
                     class="basic">
          <h2>基本设置</h2>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form ref="form"
                       :model="personalForm"
                       label-width="120px"
                       label-suffix="：">
                <el-form-item label="手机号"
                              prop="phone_number">
                  <el-input v-model="personalForm.phone_number"
                            placeholder="手机号" />
                </el-form-item>
                <el-form-item label="QQ 号"
                              prop="qq_number">
                  <el-input v-model="personalForm.qq_number" />
                </el-form-item>
                <el-form-item label="微信号"
                              prop="wechat_number">
                  <el-input v-model="personalForm.wechat_number" />
                </el-form-item>
                <el-form-item label="邮箱"
                              prop="email">
                  <el-input v-model="personalForm.email" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"
                             @click="toSave()">保存</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <!--                        头像如何处理？-->
            <el-col :span="8">
              <image-upload v-model:url="personalForm.head_picture"
                            action="http://localhost:8888/user/uploadPicture"
                            :data={username:account.name}
                            :headers="myHeaders"
                            class="headimg-upload"
                            @on-success="handleSuccess" />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="安全设置"
                     class="security">
          <h2>安全设置</h2>
          <div class="setting-list">
            <div class="item">
              <div class="content">
                <div class="title">账户密码</div>
                <div class="desc">当前密码强度：强</div>
              </div>
              <div class="action">
                <el-button type="text"
                           @click="editPassword">修改</el-button>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <div class="title">密保手机</div>
                <div class="desc">已绑定手机：187****3441</div>
              </div>
              <div class="action">
                <el-button type="text">修改</el-button>
              </div>
            </div>
            <div class="item">
              <div class="content">
                <div class="title">备用邮箱</div>
                <div class="desc">当前未绑定备用邮箱</div>
              </div>
              <div class="action">
                <el-button type="text">绑定</el-button>
              </div>

            </div>
            <div class="item">
              <div class="content">
                <div class="title">人像录入</div>

                <div class="desc">录入头像方便下次登陆</div>
              </div>
              <!-- <div class="action">
                <el-button type="text"
                           @click="toWerk">录入</el-button>
              </div> -->
              <div class="action">
                <el-button type="text"
                           @click="takePhoto">录入</el-button>
              </div>
            </div>
          </div>
          <bbbb ref="clearCamera"
          @pagination = 'takePhoto'
                v-if="diaload"
                @closed="clearIntervals" />
        </el-tab-pane>
      </el-tabs>
    </page-main>
  </div>
</template>


<style lang="scss" scoped>
:deep(.el-tabs) {
  .el-tabs__header .el-tabs__nav {
    .el-tabs__active-bar {
      z-index: 0;
      width: 100%;
      background-color: #e1f0ff;
      border-right: 2px solid #409eff;
    }

    .el-tabs__item {
      text-align: left;
      padding-right: 100px;
    }
  }

  .el-tab-pane {
    padding: 0 20px 0 30px;
  }
}

h2 {
  margin: 0;
  margin-bottom: 30px;
  font-weight: normal;
}

.basic {
  :deep(.headimg-upload) {
    > div {
      text-align: center;
    }

    .el-upload-dragger {
      border-radius: 50%;
    }
  }
}

.security {
  .setting-list {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #e8e8e8;

      .content {
        .title {
          margin-bottom: 5px;
          color: #666;
        }

        .desc {
          font-size: 14px;
          color: #999;
        }
      }

      &:last-child {
        border-bottom: 0;
      }
    }
  }
}
</style>
